<template>
  <div>
    <p>{{ count }}</p>
    <p>
      <button @click="handleClickFn">点击事件</button>
    </p>

    <!-- 使用子组件 -->
    <Carchild>></Carchild>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive, computed, provide } from 'vue'
// @ts-ignore
import Carchild from '@/components/Carchild.vue'

// 导入provide 提供的参数key 的类型
// @ts-ignore
import { key } from '@/utils/type'

// 给 ref 响应式函数定义变量的时候,声明数据类型
const count = ref<number>(100)

// 给reactve 标注类型
interface userType {
  name: string
  age?: number
}
const user: userType = reactive({ name: '小红' })

//给计算属性标注类型
const double = computed<number>(() => {
  return count.value * 2
})

// 给事件处理函数标注类型
const handleClickFn = (event: Event) => {
  // 使用类型断言 指定元素为button 元素
  console.log((event.target as HTMLButtonElement).innerHTML)
}

// 给后代组件提供数据, 后代依赖注入实现跨级组件通信

provide(key, count.value)
</script>
<style scoped>
</style>